<template>
  <el-dialog title="修改密码" :visible.sync="dialogVisible" width="30%" style="vertical-align: middle;">
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="旧密码" prop="oldPassword">
        <el-input type="password" v-model="ruleForm.oldPassword" autocomplete="off" @input="failMessage=''"></el-input>
        <span style="color:red">{{failMessage}}</span>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input type="password" v-model="ruleForm.newPassword" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkNewPassword">
        <el-input type="password" v-model="ruleForm.checkNewPassword" autocomplete="off"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button type="danger" @click="cancel">取 消</el-button>
      <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {mapMutations} from "vuex";
import request from "@/utils/Request";


export default {
  name: "ResetPass",
  data() {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入旧密码'));
      } else {
        if (this.ruleForm.oldPassword !== '') {
          this.$refs.ruleForm.validateField('validatePass');
        }
        callback();
      }
    };
    const validateNewPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入新密码'));
      } else {
        if (this.ruleForm.newPassword !== '') {
          this.$refs.ruleForm.validateField('checkNewPassword');
        }
        callback();
      }
    };
    const validateNewPass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'));
      } else if (value !== this.ruleForm.newPassword) {
        callback(new Error('两次输入新密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      ruleForm: {
        oldPassword: '',
        newPassword: '',
        checkNewPassword: ''
      },
      rules: {
        oldPassword: [
          {required: true, validator: validatePass, trigger: 'blur'},
          {min: 1, max: 50, message: '长度在 1 到 15 个字符', trigger: 'blur'}
        ],
        newPassword: [
          {required: true, validator: validateNewPass, trigger: 'blur'},
          {min: 1, max: 50, message: '长度在 1 到 15 个字符', trigger: 'blur'}
        ],
        checkNewPassword: [
          {required: true, validator: validateNewPass2, trigger: 'blur'},
          {min: 1, max: 50, message: '长度在 1 到 15 个字符', trigger: 'blur'}
        ]
      },
      failMessage: ''
    };
  },
  mounted() {
  },
  methods: {
    show() {
      this.dialogVisible = true;
    },
    async submitForm(formName) {
      const validate = await new Promise((resolve, reject) => {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            resolve(true)
          } else {
            resolve(false);
          }
        });
      })
      if (!validate) {
        return;
      }
      const confirm = await this.$confirm('是否确认提交?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return true;
      }).catch(() => {
        return false;
      });
      if (!confirm) {
        return;
      }
      const resetResult = await request.post("/auth/resetPassword", this.ruleForm).then(({data}) => {
        if (data.success) {
          return true;
        } else {
          this.failMessage = data.message;
          return false;
        }
      }).catch(err => {
        this.$message({type: 'error', message: "重置密码失败"});
        console.log(err)
        return false;
      });
      if (resetResult) {
        const confirm = await this.$confirm('重置密码成功，是否重新登录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push({path:'/Login'})
        }).catch(() => {
          return false;
        });
      }
    },
    cancel() {
      this.dialogVisible = false;
    },
    ...mapMutations(['removeTab'])
  }
}
</script>

<style scoped>

</style>